<template>
    <div class="newsindex" :style="{ height: getHeight }">
        <div class="newsindex-header">
            <div class="newsindex-header-left">
                <img src="https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2022/12/16/47f9e18b-57ed-4c59-9c4c-8ad2287b63e8.png" style="height:100%">
                <img src="https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2022/12/16/d2709c59-2125-4e9c-8c57-b3059c03d2b0.png" style="height:100%">
            </div>
            <div class="newsindex-header-right">
                <div class="weather">
                    <span>
                        <i :class="weather"></i>
                    </span>
                    <span style="font-size:xx-large;">
                        {{ temperature }}℃
                    </span>
                    <div class="updatetime">
                        <span>
                            {{ nowtime.split('T')[0] }}
                        </span>
                        <span>
                            {{ nowtime.split('T')[1] }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="newsindex-body">
            <div class="newsindex-body-left">
                <el-carousel ref="carousel" :height="CarouselHeight" :pause-on-hover="true" 
                    :autoplay="false" @change="changecon">
                    <el-carousel-item v-for="(item, index) in tableData" :key="index">
                        <el-image v-if="!showif(item.newsImagePath)"
                            style="width: 100%; height: 100%; border-radius: 10px;" :src="item.newsImagePath"
                            fit="contain" />
                        <video v-if="showif(item.newsImagePath)"  :src="item.newsImagePath" style="width:100%; height:100%;object-fit:cover;border-radius: 10px;"
                           controls />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="newsindex-body-right">
                <div class="newsindex-body-right-top">
                    <div style="font-family:Verdana, Geneva, Tahoma, sans-serif">热点新闻</div>
                    <div class="hot-news">
                        <span v-for="(item, index) in tableData" :key="index" @click="clickP(index, carousel)"
                            :class="watcar === index ? 'changespan' : ''">
                            <el-icon>
                                <Collection />
                            </el-icon>
                            <p>{{ item.newsTitle }}</p>
                        </span>
                    </div>
                </div>
                <div class="newsindex-body-right-buttom">
                    <div style="font-family:Verdana, Geneva, Tahoma, sans-serif">贡献成员</div>
                    <div class="member">
                        <span><el-icon>
                                <UserFilled />
                            </el-icon>
                            <p>2000301019-黄宗继</p>
                        </span>
                        <span><el-icon>
                                <UserFilled />
                            </el-icon>
                            <p>2000301036-谢天恒</p>
                        </span>
                        <span><el-icon>
                                <UserFilled />
                            </el-icon>
                            <p>2000301037-张文杰</p>
                        </span>
                        <span><el-icon>
                                <UserFilled />
                            </el-icon>
                            <p>2000301038-赵加乐</p>
                        </span>
                        <span><el-icon>
                                <UserFilled />
                            </el-icon>
                            <p>2000301110-陈雨新</p>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import api from '../../api/api'
import { UserFilled, Collection } from '@element-plus/icons-vue'
import { CarouselInstance } from 'element-plus';

let getHeight = ref('')

const CarouselHeight = ref('')

const tableData = ref<any[]>([])

const total = ref(0)

const weather = ref('')
const temperature = ref('')
const nowtime = ref('')

const watcar = ref(0)

const carousel = ref<CarouselInstance>()


const changecon = (e: number) => {
    watcar.value = e

}

const clickP = (index: number, carousel: any) => {
    carousel.setActiveItem(index)
}

const currentTime = () => {
    setInterval(getnowtime, 1000)
}

const getnowtime = () => {
    const time = new Date()
    const y = time.getFullYear()
    const M = (time.getMonth() + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1)
    const d = time.getDate()
    const h = time.getHours() < 10 ? "0" + time.getHours() : time.getHours()
    const m = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()
    const s = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()
    nowtime.value = y + '年' + M + '月' + d + '日T' + h + ':' + m + ':' + s
    if (h > 18 || h < 6) {
        weather.value = 'iconfont icon-yewan'
    }
}

const getfilename = (url: string) => {
    const fileurl = decodeURI(url)
    if (fileurl != '') {
        return fileurl.split('/')[4].split('?')[0]
    }
    return ''
}

const showif = (url: string) => {
    const fileurl = getfilename(url)
    if (fileurl != '' && fileurl.split('.')[1] == 'mp4') {
        return true
    }
    return false
}




onMounted(() => {
    currentTime()
    getHeight.value = window.innerHeight - 116 + 'px'
    CarouselHeight.value = window.innerHeight - 218 + 'px'
    window.onresize = () => {
        getHeight.value = window.innerHeight - 116 + 'px'
        CarouselHeight.value = window.innerHeight - 218 + 'px'
    }

    api.reverse({ page: 1, pageSize: 5 })
        .then(res => {
            if (res.data.code == 200) {
                tableData.value = res.data.data.records
                total.value = res.data.data.size
            }
        })
        .catch(err => console.log(err))

    //获取天气信息
    fetch(`https://api.seniverse.com/v3/weather/now.json?key=SCYrvkytJze9qyzOh&location=guilin&language=zh-Hans&unit=c`)
        .then((res) => {
            return res.json()
        }).then((json) => {
            weather.value = json.results[0].now.text
            temperature.value = json.results[0].now.temperature
            switch (weather.value) {
                case '晴': weather.value = 'iconfont icon-qingtian'; break;
                case '阴': weather.value = 'iconfont icon-yintian'; break;
                case '小雨': weather.value = 'iconfont icon-xiaoyu'; break;
                case '多云': weather.value = 'iconfont icon-duoyun'; break;
                default: weather.value = 'iconfont';;
            }
        })
        .catch(err => console.log(err))
})



</script>

<style scoped>
.newsindex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fcfffc;
    border-radius: 10px;

}

.newsindex-header {
    height: 10vh;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;

}

.newsindex-header-left {
    flex: 2.1;
    border-radius: 10px;
    display: flex;
    padding: 10px;
    justify-content: space-between;
    border: 1px solid burlywood;

}

.newsindex-header-right {
    flex: 0.85;
    border-radius: 10px;
    border: 1px solid burlywood;

}

.weather {
    display: flex;
    padding: 5px;
    justify-content: space-between;
    align-items: center;

}

.weather span:nth-child(1){
    flex: 0.65;
}

.weather span:nth-child(2){
    flex: 1;
}

.updatetime {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.updatetime span:nth-child(1) {
    font-size: small;
}

.updatetime span:nth-child(2) {
    font-size: x-large;
}

.newsindex-body {
    height: 70vh;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;

}

.newsindex-body-left {
    flex: 2.0;

}


.newsindex-body-right {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    flex: 0.8;
    border-radius: 10px;
    justify-content: space-between;

}

.newsindex-body-right-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid burlywood;

}

.newsindex-body-right-buttom {
    flex: 1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid burlywood;

}

.member {
    width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.member span {
    height: 4vh;
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: 10px;
    padding-left: 5px;
    margin-top: 5px;
    border: 1px solid wheat;
}

.member span p {
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 400;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #666666;
    font-size: 15px;

}

.hot-news {
    width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.hot-news span {
    height: 5vh;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    padding-left: 5px;
    margin-top: 5px;
    border: 1px solid wheat;
}

.hot-news p {
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 400;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #666666;
    font-size: 15px;

}

.changespan {
    color: #f46267;
    background-color: wheat;
    height: 5.5vh;
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    padding-left: 5px;
    margin-top: 5px;
    border: 1px solid wheat;
}
</style>